<template>
	<view class="resume">
		<form>
			<!-- 姓名 -->
			<view class="resume-list">
				<view class="label">姓名:</view>
				<view class="resume-input-box">
					<input v-model="resumeData.name" class="resume_input" placeholder="您的姓名" type="text" />
				</view>
			</view>
			<!-- 面试岗位 -->
			<view class="resume-list">
				<view class="label">应聘岗位：</view>
				<view class="resume-input-box">
					<input v-model="resumeData.job_name" class="resume_input" placeholder="如：前端工程师" type="text" />
				</view>
			</view>
			<!-- 性别 -->
			<view class="resume-list">
				<view class="label">性别：</view>
				<view class="resume-input-box">
					<image mode="widthFix" class="more-btn" src="/static/img/common/more.svg"></image>
					<picker bindinput="input" class="resume_input" @change="bindGenderChange" :value="resumeData.sex"
						:range="gender">
						<view class="picker" v-if="resumeData.sex">{{gender[resumeData.sex]}}</view>
						<view v-else class="picker">请选择性别</view>
					</picker>
				</view>
			</view>
			<!-- 出生年月 -->
			<view class="resume-list">
				<view class="label">出生年月：</view>
				<view class="resume-input-box">
					<image mode="widthFix" class="more-btn" src="/static/img/common/more.svg"></image>
					<picker bindinput="input" class="resume_input" mode="date" :value="resumeData.birth"
						@change="bindDateChange">
						<view class="picker" v-if="resumeData.birth">{{resumeData.birth}}</view>
						<view v-else class="picker">请选择出生日期</view>
					</picker>
				</view>
			</view>
			<!-- 居住地址 -->
			<view class="resume-list">
				<view class="label">居住地区：</view>
				<view class="resume-input-box">
					<image mode="widthFix" class="more-btn" src="/static/img/common/more.svg">
					</image>
					<picker bindinput="input" class="resume_input" mode="region" @change="bindRegionChange"
						:value="resumeData.address">
						<view class="picker" v-if="resumeData.address">
							{{resumeData.address[0]}}-{{resumeData.address[1]}}-{{resumeData.address[2]}}
						</view>
						<view v-else class="picker">请选择居住地区</view>
					</picker>
				</view>
			</view>
			<!-- 联系电话 -->
			<view class="resume-list">
				<view class="label">联系电话：</view>
				<view class="resume-input-box">
					<input v-model="resumeData.phone" class="resume_input" placeholder="建议填写手机号码" type="text" />
				</view>
			</view>
			<!-- 邮箱 -->
			<view class="resume-list">
				<view class="label">邮箱：</view>
				<view class="resume-input-box">
					<input v-model="resumeData.email" class="resume_input" placeholder="投递简历后请多关注邮箱" type="text" />
				</view>
			</view>
			<!-- 毕业院校 -->
			<view class="resume-list">
				<view class="label">毕业院校：</view>
				<view class="resume-input-box">
					<input v-model="resumeData.graduated" class="resume_input" placeholder="如：清华大学软件学院" type="text" />
				</view>
			</view>
			<!-- 最高学历 -->
			<view class="resume-list">
				<view class="label">最高学历：</view>
				<view class="resume-input-box">
					<input v-model="resumeData.highest_degree" class="resume_input" placeholder="如：本科" type="text" />
				</view>
			</view>
			<!-- 所学专业 -->
			<view class="resume-list">
				<view class="label">所学专业：</view>
				<view class="resume-input-box">
					<input v-model="resumeData.major" class="resume_input" placeholder="如：软件工程" type="text" />
				</view>
			</view>
			<!-- 技能描述 -->
			<view class="resume-list">
				<view class="label">技能描述：</view>
				<view class="resume-input-box">
					<view class="resume-input-box">
						<textarea rows="4" v-model="resumeData.job_skill" class="resume_textarea"
							placeholder="请填写与投递岗位相关的技能描述"></textarea>
					</view>
				</view>
			</view>
			<!-- 工作经验 -->
			<view class="resume-list">
				<view class="label">工作经验：</view>
				<view class="resume-input-box">
					<view class="resume-input-box">
						<textarea rows="4" v-model="resumeData.work_experience" class="resume_textarea"
							placeholder="请填写具有代表性的工作/项目经验"></textarea>
					</view>
				</view>
			</view>
			<!-- 自我评价 -->
			<view class="resume-list">
				<view class="label">自我评价：</view>
				<view class="resume-input-box">
					<textarea rows="4" v-model="resumeData.self_assessment" placeholder="描述一下自己，让人资认识你吧"
						class="resume_textarea"></textarea>
				</view>
			</view>

			<!-- 个人作品 -->
			<view class="resume-list" @tap="chooseFile">
				<text class="label">个人作品：</text>
				<image v-if="resumeData.portfolio" mode="widthFix" class="title-icon" src="/static/img/resume/zip.svg">
				</image>
				<text v-if="!resumeData.portfolio" class="tag">未上传作品集。作品集能够提升面试机会哦</text>
			</view>

			<!-- 保存简历 -->
			<view class="submit">
				<button @tap="postData" class="submit-btn" style="width:660rpx">保存简历</button>
			</view>
		</form>
	</view>
</template>

<script setup>
	import {
		onLoad
	} from '@dcloudio/uni-app'
	import {
		ref,
		inject
	} from 'vue'
	import loginCheck from '../../hooks/loginCheck';
	import {
		req,
		post
	} from '/hooks/req.js'
	import {
		decrypt,
		encrypt
	} from "@/hooks/encrypt.js";
	const $root = inject('$root')
	let token = ""
	let id = ""

	const resumeData = ref({
		"name": "", //姓名
		"sex": "", //性别选择
		"job_name": "", //应聘岗位
		"birth": "", //出生年月
		"address": "", //居住地址
		"phone": "", //联系电话
		"email": "", //邮箱
		"graduated": "", //毕业院校
		"highest_degree": "", //最高学历
		"major": "", //所学专业
		"job_skill": "", //技能描述
		"work_experience": "", //工作经验
		"self_assessment": "" //个人评价
	})
	const gender = ref(["女性", "男性"]) //性别选择范围

	onLoad(options => {
		if (loginCheck()) {
			token = decrypt(JSON.parse(uni.getStorageSync("userData")).token)
		}
		if (options.id) {
			id = options.id
			getResumeDetail()
		}
	})

	const getResumeDetail = () => {
		req($root + `/curri/${id}`, token).then(result => {
			resumeData.value = result.data.data
			resumeData.value.address = resumeData.value.address.split('-')
		})
	}

	const postData = () => {
		if (isBlank()) {
			uni.showToast({
				title: '您有选项未填写',
				icon: 'error'
			})
			return
		}
		if (id) {
			edit()
		} else {
			add()
		}
	}

	//性别选择
	const bindGenderChange = e => {
		resumeData.value.sex = e.detail.value
	}

	//时间选择
	const bindDateChange = e => {
		resumeData.value.birth = e.detail.value
	}

	//区域选择
	const bindRegionChange = e => {
		resumeData.value.address = e.detail.value
	}

	const add = () => {
		if (typeof(resumeData.value.address) == "object") {
			resumeData.value.address = resumeData.value.address.join('-')
		}
		resumeData.value.sex = Number(resumeData.value.sex)
		post($root + `/curri/`, resumeData.value, token).then(result => {
			if (result.data.code == 200) {
				uni.showToast({
					title: '简历保存成功',
					icon: "success",
				})
			} else {
				uni.showToast({
					title: '简历保存失败',
					icon: "error",
				})
			}
		})
	}

	const edit = () => {
		if (typeof(resumeData.value.address) == "object") {
			resumeData.value.address = resumeData.value.address.join('-')
		}
		resumeData.value.sex = Number(resumeData.value.sex)
		post($root + `/curri/update/${resumeData.value.cid}`, resumeData.value, token).then(result => {
			if (result.data.code == 200) {
				uni.showToast({
					title: '简历编辑成功',
					icon: "success"
				})
			} else {
				uni.showToast({
					title: '简历编辑失败',
					icon: "error"
				})
			}
		})
	}
	const isBlank = () => {
		for (let key in resumeData.value) {
			if (key != "attachment_url" && key != "attachment_uuid" && !resumeData.value[key]) {
				return true
			}
		}
		return false
	}

	/* 选择作品集 */
	const chooseFile = () => {
		uni.chooseMessageFile({
			count: 1,
			extension: ['.zip', '.doc'],
			success: function(res) {
				uni.showToast({
					icon: 'success',
					title: '文件上传成功'
				});
				resumeData.value.portfolio = res.tempFiles[0].path
			},
			fail: function() {
				uni.showToast({
					icon: 'error',
					title: '文件上传失败'
				});
				resumeData.value.portfolio = ""
			}
		});
	}
	/* 上传作品集 */
	const uploadFile = (file) => {
		if (file) {
			uni.uploadFile({
				filePath: file,
				name: 'file',
				url: $root + '/upload/curri/',
				success: (uploadFileRes) => {
					let fileName = JSON.parse(uploadFileRes.data).data.fileName
					resumeData.value.attachment_uuid = fileName
				}
			})
		}
	}
</script>

<style>
	page {
		background: white;
		padding-bottom: 100px;
	}
</style>

<style scoped>
	.resume {
		width: 600rpx;
		margin: auto;
		margin-top: 15px;
	}

	.label {
		color: #676767;
		font-size: 14px;
		font-weight: bold;
	}

	.resume_input {
		width: 100%;
		border-bottom: 1px solid #ebebeb;
		height: 40px;
		font-size: 14px;
		color: #777;
	}

	.resume_textarea {
		width: 100%;
		border-bottom: 1px solid #ebebeb;
		font-size: 14px;
		height: 80px;
		margin-top: 10px;
		line-height: 2;
		color: #777;
	}

	.resume-list {
		margin-top: 15px;
	}

	.resume-input-box {
		position: relative;
	}

	.picker {
		position: relative;
		top: 11px;
	}
</style>